<script lang="ts" setup>
// import { Modal } from '@arco-design/web-vue'
// import CreateIssueButton from './CreateIssueButton.vue'
// import type { Comment } from './stores/commentStore'
// import AssignButton from './AssignButton.vue'
// import CommentButton from './CommentButton.vue'
// import { useIssueTable } from './composables/useIssueTable'
// import { useUserStore } from '@/stores/user'
// import { Role } from '@/constants/role'
// import type { TableSlotCell } from '@/types/components-tool'
// import type { Issue } from '@/pages/HomePage/stores/issueStore'
// import { useCommentTable } from '@/pages/HomePage/composables/useCommentTable'

// const { columns, issues, isLoading } = useIssueTable()
// const { columns: commentColumns, comments } = useCommentTable()
// const userStore = useUserStore()

// const handleDetail = (title: string, content: string) => {
//   Modal.info({
//     title,
//     content,
//     simple: true
//   })
// }
</script>

<template>
  <h1>Home</h1>
  <!-- <div class="card">
    <h2 class="text-base text-arco-2 mt-0 flex gap-1 items-center select-none justify-start">
      <i class="i-uil-align-right-justify" />课题列表
      <CreateIssueButton v-if="userStore.isEnabled(Role.Teacher)" class="ml-auto" />
    </h2>
    <a-table size="small" :loading="isLoading" :columns="columns" :data="issues">
      <template #status="{ record: { status } }: TableSlotCell<Issue>">
        <a-tag v-if="status" color="red" size="small">已指派</a-tag>
        <a-tag v-else color="green" size="small">竞选中</a-tag>
      </template>

      <template
        #title-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }"
      >
        <div
          class="flex flex-col gap-xs bg-arco-2 rounded border-arco-2 border-solid pa-xs border-1"
        >
          <a-input
            size="mini"
            :model-value="filterValue[0]"
            @input="(value) => setFilterValue([value])"
          />
          <div class="flex gap-xs">
            <a-button size="mini" type="primary" @click="handleFilterConfirm">查询</a-button>
            <a-button size="mini" @click="handleFilterReset">重置</a-button>
          </div>
        </div>
      </template>

      <template
        #teacher-id-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }"
      >
        <div
          class="flex flex-col gap-xs bg-arco-2 rounded border-arco-2 border-solid pa-xs border-1"
        >
          <a-input
            size="mini"
            :model-value="filterValue[0]"
            @input="(value) => setFilterValue([value])"
          />
          <div class="flex gap-xs">
            <a-button size="mini" type="primary" @click="handleFilterConfirm">查询</a-button>
            <a-button size="mini" @click="handleFilterReset">重置</a-button>
          </div>
        </div>
      </template>

      <template
        #teacher-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }"
      >
        <div
          class="flex flex-col gap-xs bg-arco-2 rounded border-arco-2 border-solid pa-xs border-1"
        >
          <a-input
            size="mini"
            :model-value="filterValue[0]"
            @input="(value) => setFilterValue([value])"
          />
          <div class="flex gap-xs">
            <a-button size="mini" type="primary" @click="handleFilterConfirm">查询</a-button>
            <a-button size="mini" @click="handleFilterReset">重置</a-button>
          </div>
        </div>
      </template>

      <template
        #action="{
          record: { content, title, teacherID, teacherName, id, status }
        }: TableSlotCell<Issue>"
      >
        <a-button-group size="mini" type="dashed" status="success">
          <a-button @click="handleDetail(title, content)">详情</a-button>
          <AssignButton
            v-if="!userStore.isEnabled(Role.Teacher) && !status"
            :targetID="teacherID"
            :targetName="teacherName"
            :issueID="id"
          />
        </a-button-group>
      </template>
    </a-table>
  </div>

  <div class="card">
    <h2 class="text-base text-arco-2 mt-0 flex gap-1 items-center select-none justify-start">
      <i class="i-uil-comment-alt-lines" />消息列表
    </h2>

    <a-table size="small" :loading="isLoading" :columns="commentColumns" :data="comments">
      <template
        #action="{
          record: { id, publisherID, publisher, issueID, hasReplied }
        }: TableSlotCell<Comment>"
      >
        <a-tag v-if="publisherID === userStore.user.username" color="blue" size="small">
          我回复的
        </a-tag>
        <a-tag v-else-if="hasReplied" color="green" size="small">已回复</a-tag>
        <CommentButton v-else :id :targetID="publisherID" :targetName="publisher" :issueID />
      </template>
    </a-table>
  </div> -->
</template>
